import React, { Component } from "react";
import { connect } from "react-redux";
import { Button, Input, Form } from "element-react";
import "element-theme-default";
import axios from "axios";
import cookie from "react-cookies";
import { loginIn,logout,holdlogin } from "../actions/block";


class Blocking extends Component {
  constructor(props) {
    super(props);

    this.state = {
      form: {
        user: "",
        password: ""
      },
      rules: {
        user: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入用户名"));
              } else {
                callback();
              }
            }
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入密码"));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  }

 /*  componentWillMount() {
    // console.log(this.props.login)
    if ($.cookie("cookieName")) {
      console.log(11)
      console.log(this.props.login)
        // var cookieName=$.cookie("cookieName")
        // this.props.holdlogin('cookieName')
        // login: "你好," + $.cookie("cookieName")
    }
  }cookies失败 */

  handleSubmit(e) {
    e.preventDefault();
    var params = this.state.form;

    this.refs.form.validate(valid => {
      if (valid) {
        // this.props.login(this.state.form)
        axios
          .post("http://localhost:3000/users/login", {
            name: this.state.form.user,
            password: this.state.form.password
          })
          .then(res => {
            if (res.data.name) {
              this.props.history.push('./')
              this.props.loginIn(res.data.name);
              // $.cookie("cookieName", res.data.name, { expires: 7 });
            } else {
              alert("用户名或密码错误!");
            }
          });
      }
    });
  }

  quit(e){
    e.preventDefault();
    this.props.logout();
  }

  handleReset(e) {
    e.preventDefault();
    this.refs.form.resetFields();//置空无效
  }

  onChange(key, value) {
    this.setState({
      form: Object.assign({}, this.state.form, { [key]: value })
    });
  }

  render() {
    //console.log($.cookie("username"))
    console.log('this.props',this.props)
    const { loginIn,login,logout,holdlogin } = this.props;
    if(login!=='登录'){
      var content = (<button onClick={this.quit.bind(this)}>退出</button>)
    }else{
      var content=(
        <Form
          ref="form"
          model={this.state.form}
          rules={this.state.rules}
          labelWidth="100"
          className="demo-ruleForm"
        >
          <Form.Item label="用户名" prop="user">
            <Input
              type="text"
              value={this.state.form.user}
              onChange={this.onChange.bind(this, "user")}
              autoComplete="off"
            />
          </Form.Item>
          <Form.Item label="密码" prop="password">
            <Input
              type="password"
              value={this.state.form.password}
              onChange={this.onChange.bind(this, "password")}
              autoComplete="off"
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" onClick={this.handleSubmit.bind(this)}>
              提交
            </Button>
            <Button onClick={this.handleReset.bind(this)}>重置</Button>
          </Form.Item>
        </Form>
      )
    }

    return (
      <div className="container">
        {content}
      </div>
    );
  }
}
const getLogin = (state)=>{
  return {
    login:state.block.login,
    
  }
};

const Block = connect(getLogin, {loginIn,logout,holdlogin})(Blocking);
export default Block;